<template>
    <div>
        h
        <h2>会员信息录入</h2>
        <table class="table table-bordered">
            <tr>
                <td align="right">姓名</td>
                <td><input type="text" v-model="state.userName" /></td>
            </tr>
            <tr>
                <td align="right">手机号</td>
                <td><input type="text" v-model="state.phone" /></td>
            </tr>
            <tr>
                <td align="right">性别</td>
                <td><input type="text" v-model="state.sex" /></td>
            </tr>
            <tr>
                <td align="right">生日</td>
                <td><input type="text" v-model="state.birthDay" /></td>
            </tr>
            <tr>
                <td align="right">用户名</td>
                <td><input type="text" v-model="state.mName" /></td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td><input type="password" v-model="state.mPwd" /></td>
            </tr>
            <tr>
                <td align="right">头像</td>
                <td>
                    <input type="file" @change="change" />
                    <img v-if="src!=''" :src="src" alt="" width="70" height="70" />
                </td>
            </tr>
            <tr>
                <td align="right"></td>
                <td><input type="button" value="录入" @click="add" /></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
let data = reactive({
    state: {
        userName: "",
        phone: "",
        sex: "",
        birthDay: "",
        mName: "",
        mPwd: "",
        mPhoto: "",
    },
    src: ''
})
let { state, src } = toRefs(data)
const add = () => {
    if(state.value.userName==""){
        alert("姓名不能为空")
        return
    }
    if(state.value.phone==""){
        alert("手机号不能为空")
        return
    }
    if(state.value.sex==""){
        alert("性别不能为空")
        return
    }
    if(state.value.birthDay==""){
        alert("生日不能为空")
        return
    }
    if(state.value.mName==""){
        alert("用户名不能为空")
        return
    }
    if(state.value.mPwd==""){
        alert("密码不能为空")
        return
    }

    let obj = {
        userName: state.value.userName,
        phone: state.value.phone,
        sex: state.value.sex,
        birthDay: state.value.birthDay,
        mName: state.value.mName,
        mPwd: state.value.mPwd,
        mPhoto: state.value.mPhoto,
    }
    axios({
        url: '/api/Member/AddMember',
        method: 'post',
        data: obj
    })
        .then(res => {
            console.log(res)
            if(res.data.data==1){
                alert("添加成功")
                router.push("/list")
            }
            if(res.data.data==-1){
                alert("名称不能重复")
                return
            }
        })
        .catch(err => {
            console.log(err)
        })
}
const change = (e: any) => {
    let FromData = new FormData()
    let obj = e.target.files[0]
    FromData.append("file", obj)
    axios({
        url: '/api/Member/GetImge',
        method: 'post',
        data: FromData
    })
        .then(res => {
            console.log(res)
            if (res.data.code == 1000) {
                alert("上传成功")
                src.value = "https://localhost:7096" + res.data.fileName
                state.value.mPhoto = "https://localhost:7096" + res.data.fileName
            }
            else {
                alert("上传失败")
            }
        })
        .catch(err => {
            console.log(err)
        })
}

</script>

<style scoped></style>